Goal Choice With Message Box
goalChoiceWithMessageBox is a new template to show two choices with a text box that supports HTML code.
| Key | Notes |
|---|---|
type | goalChoiceWithMessageBox |
stepId | A unique step ID |
title | The step’s title |
subtitle | The step’s subtitle (optional) |
useHTML | Set it to true to support HTML in the title or subtitle. |
backgroundColor | The page’s background color |
innerBackgroundColor | The inner step’s background color |
textColor | The main text color |
subtitleTextColor | The subtitle color |
choiceBackgroundColor | Background of the choices. |
choiceTextColor | Text color of the choices |
choiceTextBackgroundColor | The green bg color is this screenshot:  |
ctaText | e.g. Continue |
ctaTextColor | |
ctaBackgroundColor | |
hideCta | When set to true, it hides the CTA button on the step and gets the user to move to the next step once they choose an option – it’s false by default. |
choices | The choices of the step. Note: Only two choices are currently supported. "choices": [ { "name": "Male", "value": "male", "imageUrl": "https://c.thefab.co/web-onboarding/mind/img_liven_style_male_opt.png" }, { "name": "Female", "value": "female", "imageUrl": "https://c.thefab.co/web-onboarding/mind/img_liven_style_female_opt.png" } ]  |
messageBox | The text message that we should show at the end of the step. It accepts HTML. "messageBox": { "text": "By clicking clickingBy clicking 'Male' or 'Female' you agree with the <a href='https://www.thefabulous.co/terms.html'>Terms of Use</a> and <a href='https://www.thefabulous.co/terms.html#privacy'>Service Privacy Policy</a>, Subscription Policy and Cookie Policy.", "textColor": "#343134", "linkColor": "#00A37F", "backgroundColor": "#FFFFFF" }  |
JSON example
{
"id": "mind_app_id",
"journeyId": "SaDJUYAjRv",
"language": "en",
"appId": "co.thefab.mind",
"seo": {
"title": "Lumiere",
"favicon": "https://c.thefab.co/web-onboarding/mind/mind-favicon.png",
"description": "Manage stress and anxiety through self-care practices and empowering affirmations. Embark on a journey of self-love."
},
"logoWithProgressBar": {
"type": "gradient",
"logoImage": "https://storage.googleapis.com/c.thefab.co/web-onboarding/mind/alive/img_lumiere_logo_logo_opt.png",
"logoWidth": "115px",
"logoWidthMobile": "115px",
"logoHeight": "26px",
"logoHeightMobile": "26px",
"progressBarBackground": "#FFF",
"progressBarColor": "#00A37F"
},
"steps": [
{
"type": "goalChoiceWithMessageBox",
"stepId": "gender",
"backgroundColor": "#E7E6E1",
"innerBackgroundColor": "#F3F2EF",
"title": "A Personal Well-Being Management Plan",
"subtitle": "Improve Your Well-Being With Our Personalized Plan",
"textColor": "#343134",
"subtitleColor": "#343134",
"choiceBackgroundColor": "white",
"choiceTextColor": "white",
"choiceTextBackgroundColor": "#00A37F",
"ctaText": "Continue",
"ctaTextColor": "white",
"ctaBackgroundColor": "#00A37F",
"choices": [
{
"name": "Male",
"value": "male",
"imageUrl": "https://c.thefab.co/web-onboarding/mind/img_liven_style_male_opt.png"
},
{
"name": "Female",
"value": "female",
"imageUrl": "https://c.thefab.co/web-onboarding/mind/img_liven_style_female_opt.png"
}
],
"messageBox": {
"text": "By clicking clickingBy clicking 'Male' or 'Female' you agree with the <a href='https://www.thefabulous.co/terms.html'>Terms of Use</a> and <a href='https://www.thefabulous.co/terms.html#privacy'>Service Privacy Policy</a>, Subscription Policy and Cookie Policy.",
"textColor": "#343134",
"linkColor": "#00A37F",
"backgroundColor": "#FFFFFF"
}
},
{
"type": "goalChoice",
"title": "What's your age?",
"stepId": "age",
"subtitle": "We only use your age to personalize your plan",
"textColor": "#343134",
"subtitleTextColor": "gray",
"feedbackType": "radio",
"backgroundColor": "#E7E6E1",
"hoverBackgroundColor": "#D6E0FF",
"choiceBackgroundColor": "#F1F4FE",
"choiceTextColor": "#343134",
"key": "age",
"hideIcons": true,
"showInnerHeader": true,
"innerBackgroundColor": "#F3F2EF",
"choices": [
{
"name": "18-24",
"locked": false,
"value": "18-24",
"nameColor": "#343134",
"backgroundColor": "#FFFFFF",
"hoverBackgroundColor": "#D8E4E2"
},
{
"name": "25-34",
"locked": false,
"value": "25-34",
"nameColor": "#343134",
"backgroundColor": "#FFFFFF",
"hoverBackgroundColor": "#D8E4E2"
},
{
"name": "35-44",
"locked": false,
"value": "35-44",
"nameColor": "#343134",
"backgroundColor": "#FFFFFF",
"hoverBackgroundColor": "#D8E4E2"
},
{
"name": "45-54",
"locked": false,
"value": "45-54",
"nameColor": "#343134",
"backgroundColor": "#FFFFFF",
"hoverBackgroundColor": "#D8E4E2"
},
{
"name": "55-54",
"locked": false,
"value": "55-54",
"nameColor": "#343134",
"backgroundColor": "#FFFFFF",
"hoverBackgroundColor": "#D8E4E2"
},
{
"name": "65+",
"locked": false,
"value": "65+",
"nameColor": "#343134",
"backgroundColor": "#FFFFFF",
"hoverBackgroundColor": "#D8E4E2"
}
]
},
{
"type": "interstitial",
"stepId": "chosen_our_apps",
"hideProgressBar": true,
"config": {
"id": "chosen_our_apps",
"title": "",
"showTextDelay": 100,
"showButtonsDelay": 200,
"should_animate_text": true,
"image": "https://c.thefab.co/web-onboarding/mind/alive/img_inter_liven_style_social_proof1_opt.jpg",
"color_cta": "#ffffff",
"color_cta_button": "#00A37F",
"subtitle": "",
"hide_close_icon": true,
"mode": "BOLD",
"color_background": "#F3F2EF",
"autoNext": false,
"textColor": "#fff",
"cta": "Continue"
}
},
{
"type": "questionScale",
"stepId": "express_emotions",
"title": "Do you agree with the following statement: It's difficult for me to express emotions",
"backgroundColor": "#E7E6E1",
"innerBackgroundColor": "#F3F2EF",
"scaleBarColor": "#D8E4E2",
"barIconBackgroundColor": "#FFFFFF",
"selectedBarIconBackgroundColor": "#FFFFFF",
"selectedBarIconBorderColor": "#00A37F",
"textColor": "#343134",
"ctaText": "Continue",
"ctaColor": "#FFF",
"ctaBackgroundColor": "#00A37F",
"ctaHoverBackgroundColor": "#0B866B",
"backButtonColor": "#00A37F",
"backButtonText": "Back",
"backButtonBackgroundColor": "#FFF",
"mode": "phone",
"choices": [
{
"name": "Strongly disagree",
"value": "Strongly disagree",
"imageUrl": "https://c.thefab.co/web-onboarding/mind/alive/ic_strongly_disagree.svg"
},
{
"name": "Negative",
"value": "Negative",
"imageUrl": "https://c.thefab.co/web-onboarding/mind/alive/ic_disagree.svg"
},
{
"name": "Neutral",
"value": "Neutral",
"imageUrl": "https://c.thefab.co/web-onboarding/mind/alive/ic_neutral.svg"
},
{
"name": "Positive",
"value": "Positive",
"imageUrl": "https://c.thefab.co/web-onboarding/mind/alive/ic_agree.svg"
},
{
"name": "Strongly agree",
"value": "Strongly agree",
"imageUrl": "https://c.thefab.co/web-onboarding/mind/alive/ic_strongly_agree.svg"
}
]
},
{
"type": "goalMultiChoice",
"stepId": "wellbeing_address",
"key": "wellbeing_address",
"title": "Are there aspects of your well-being you'd like to address?",
"subtitle": "Choose all that apply",
"backgroundColor": "#E7E6E1",
"innerBackgroundColor": "#F3F2EF",
"ctaBackgroundColor": "#00A37F",
"ctaColor": "#fff",
"textColor": "#343134",
"ctaText": "Continue",
"choiceBackgroundColor": "#FFFFFF",
"choiceTextColor": "#343134",
"hoverBackgroundColor": "#D8E4E2",
"hoverTextColor": "#343134",
"subtitleColor": "#777777",
"selectedChoiceBackgroundColor": "#D8E4E2",
"selectedChoiceTextColor": "#343134",
"checkboxBackgroundColor": "#F3F2EF",
"selectedCheckboxBackgroundColor": "#00A37F",
"selectMode": "multi",
"bottomButtonTextColor": "#FFF",
"bottomViewColor": "transparent",
"bottomButtonColor": "#183BC6",
"hideProgressBar": true,
"choices": [
{
"name": "Low energy",
"value": "Low energy",
"iconUrl": "https://c.thefab.co/web-onboarding/mind/icons/ic_low_energy.svg"
},
{
"name": "Worry",
"value": "Worry",
"iconUrl": "https://c.thefab.co/web-onboarding/mind/icons/ic_worry.svg"
},
{
"name": "Emotional exhaustion",
"value": "Emotional exhaustion",
"iconUrl": "https://c.thefab.co/web-onboarding/mind/icons/ic_exaustion.svg"
},
{
"name": "Overthinking",
"value": "Overthinking",
"iconUrl": "https://c.thefab.co/web-onboarding/mind/icons/ic_overthinking.svg"
},
{
"name": "Irritability",
"value": "Irritability",
"iconUrl": "https://c.thefab.co/web-onboarding/mind/icons/ic_irritability.svg"
},
{
"name": "I'm totally fine",
"value": "I'm totally fine",
"iconUrl": "https://c.thefab.co/web-onboarding/mind/icons/ic_fine.svg"
}
]
},
{
"stepId": "progress_bars",
"type": "multiProgress",
"title": "Creating your<br><span style='color: #00A37F'>personalized Well-being Management Plan</span>.",
"titleColor": "#343134",
"backgroundColor": "#F3F2EF",
"subtitle": "Sit tight! We're building the perfect plan for you.",
"subtitleColor": "gray",
"useHTML": true,
"hideOverlay": false,
"dotsColor": "#FFF",
"hideProgressBar": true,
"bars": [
{
"label": "Setting goals",
"labelColor": "#36BA9D",
"backgroundColorFilled": "#36BA9D",
"borderColorEmpty": "#FFFFFF",
"backgroundColorEmpty": "#F3F2EF",
"animation": [
{
"to": 63,
"duration": 3000,
"delay": 500,
"prompt": {
"image": "https://c.thefab.co/web-onboarding/mind/alive/ic_liven_style_build_opt.png",
"title": "Do you want to learn how to build healthy habits?",
"titleColor": "#343134",
"backgroundColor": "#FFF",
"imageWidth": "220px",
"choices": [
{
"text": "Yes",
"color": "#FFF",
"hoverColor": "#FFF",
"backgroundColor": "#00A37F",
"hoverBackgroundColor": "#0B866B"
},
{
"text": "No",
"color": "#343134",
"hoverColor": "#FFF",
"backgroundColor": "#F3F2EF",
"hoverBackgroundColor": "#00A37F"
}
]
}
},
{
"to": 100,
"duration": 1000,
"delay": 100
}
]
},
{
"label": "Adapting growth areas",
"labelColor": "#F8A86D",
"backgroundColorFilled": "#F8A86D",
"borderColorEmpty": "#FFFFFF",
"backgroundColorEmpty": "#F3F2EF",
"animation": [
{
"to": 48,
"duration": 2200,
"delay": 300,
"prompt": {
"image": "https://storage.googleapis.com/c.thefab.co/web-onboarding/mind/alive/ic_liven_style_journaling_opt.png",
"title": "Are you familiar with journaling for self-reflection?",
"titleColor": "#343134",
"backgroundColor": "#FFF",
"imageWidth": "220px",
"choices": [
{
"text": "Yes",
"color": "#343134",
"hoverColor": "#FFF",
"backgroundColor": "#F3F2EF",
"hoverBackgroundColor": "#00A37F"
},
{
"text": "No",
"color": "#343134",
"hoverColor": "#FFF",
"backgroundColor": "#F3F2EF",
"hoverBackgroundColor": "#00A37F"
}
]
}
},
{
"to": 100,
"duration": 1200,
"delay": 0
}
]
},
{
"label": "Picking content",
"labelColor": "#EA9383",
"backgroundColorFilled": "#EA9383",
"borderColorEmpty": "#FFFFFF",
"backgroundColorEmpty": "#F3F2EF",
"animation": [
{
"to": 47,
"duration": 1800,
"delay": 200,
"prompt": {
"image": "https://storage.googleapis.com/c.thefab.co/web-onboarding/mind/alive/ic_liven_style_finish_opt.png",
"title": "Are you inclined to finish what you start?",
"titleColor": "#343134",
"backgroundColor": "#FFF",
"imageWidth": "215px",
"choices": [
{
"text": "Yes",
"color": "#343134",
"hoverColor": "#FFF",
"backgroundColor": "#F3F2EF",
"hoverBackgroundColor": "#00A37F"
},
{
"text": "No",
"color": "#343134",
"hoverColor": "#FFF",
"backgroundColor": "#F3F2EF",
"hoverBackgroundColor": "#00A37F"
}
]
}
},
{
"to": 100,
"duration": 1000,
"delay": 0
}
]
}
]
},
{
"type": "planEvolution",
"stepId": "wellbeing_evolution_CHANGE_START_VALUE_GOAL_VALUE_LATER",
"title": "Prediction:<br>Your Well-Being Score",
"subtitle": "will reach your <strong><span style='color: #00A37F'>{{GOAL_VALUE}}</span></strong> goal<br>by <strong><span style='color: #00A37F'>{{TODAY|month|+4}}</span></strong>",
"startValue": "20",
"goalValue": "50",
"unit": "%",
"backgroundColor": "#F3F2EF",
"textColor": "#343134",
"subtitleColor": "#777777",
"useHTML": true,
"ctaText": "Start My Plan",
"ctaTextColor": "#FFF",
"ctaBackgroundColor": "#00A37F",
"bottomViewColor": "#FFF",
"bottomViewBoxShadow": "-1px 0px 8px 2px rgba(74,74,74,0.05)",
"chart": {
"trendDirection": "down",
"dotBorderColor": "#FFF",
"dotColor": "#8CC861",
"gridColor": "#D6D7DD",
"goalValueLabelColor": "white",
"axisTextColor": "#D6D7DD",
"goalValueText": "Goal",
"goalValueLineColor": "#8CC861",
"monthsCount": 4,
"lineGradient": {
"from": "#8CC861",
"to": "#FFB235"
},
"options": {
"span": 0.5,
"band": 0.8,
"degree": 1,
"variation": 7.5,
"extremes": 6
}
},
"featuresList": {
"title": "AND",
"textColor": "#777777",
"items": [
{
"imageUrl": "https://storage.googleapis.com/c.thefab.co/web-onboarding/mind/alive/ic_liven_style_energy_opt.png",
"title": "Your energy will skyrocket",
"subtitle": "Because your mind got time to heal.",
"textColor": "#343134",
"subtitleColor": "#777777"
},
{
"imageUrl": "https://storage.googleapis.com/c.thefab.co/web-onboarding/mind/alive/ic_liven_style_notice_opt.png",
"title": "Everybody will notice",
"subtitle": "Because there's a new energy about you.",
"textColor": "#343134",
"subtitleColor": "#777777"
}
]
},
"footerText": {
"textColor": "#777777",
"paragraphs": [
"<span style='font-size:20px; font-weight: bold; line-height: 1.8;'><span style='margin-bottom: 30px; color:#343134;'>Your personal</span><br><span style='margin-bottom: 30px; color:#00A37F;'>Well-being Management Plan</span><br><span style='margin-bottom: 30px; color:#343134;'>is ready!</span></span>"
]
}
},
{
"type": "webview",
"stepId": "science_of_lumiere",
"url": "https://c.thefab.co/web-onboarding/mind/webview/science-of-lumiere-en.html",
"ctaText": "Continue",
"showWebfloatingButtonDelay": 2000,
"showFullScreen": true,
"ctaColor": "#FFF",
"ctaBackgroundColor": "#008189",
"bottomViewColor": "#FFF",
"ctaHoverBackgroundColor": "#00676E",
"backgroundColor": "#FFF",
"paddingBottom": "70px",
"bottomViewBoxShadow": "-2px 0px 3px 0px rgba(74,74,74, 0.1)",
"webfloatingButtonLink": "https://mind.thefabulous.co/payment/pwyw/pwyw-lumiere-bimonthly?plans=mind-subs-bimonthly-normal-intro-1-thirtynine,mind-subs-bimonthly-normal-intro-1-thirtynine,mind-subs-bimonthly-normal-intro-11-thirtynine2,mind-subs-bimonthly-normal-intro-16-thirtynine2&offerPlan=mind-subs-bimonthly-discount-19&upsellPath=journey/upselling/fabulous-upsell&offerDiscount=50"
}
],
"logic": []
}
